<template>
	<div class="UpdateInfo">
		<header>
			<router-link to="/mobile/home"><span><</span></router-link>
			<h3>设置</h3>
			</header>
		<div class="box">
			<ul>
				<li><span>设置头像</span><span>></span></li>
				<li><span>更改密码</span><span>></span></li>
				<li><span>更改个人信息</span><span>></span></li>
			</ul>
			<router-link to="/mobile/home">
				<label @click="logout()">退出登录</label>
			</router-link>
			
		</div>
	</div>
</template>

<script>
	import { mapActions } from 'vuex'
	export default{
		name:'UpdateInfo',
		data() {
			return{
				
			}
		},
		methods:{
			...mapActions(['delHistory']),
			logout(){
				this.delHistory();
				window.localStorage.setItem("token",'')
				this.$message({
					message:'退出成功',
					type:'success'
				})
			}
		}
	}
</script>

<style scoped>
	.UpdateInfo{
		width: 100%;
		background: #ebebeb;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.UpdateInfo header{
		display: flex;
		line-height: 50px;
		height: 50px;
		width: 100%;
		background-color: white;
	}
	.UpdateInfo header span{
		font-size: 20px;
		margin-left: 1.25rem;
		margin-right: 9rem
	}
	.box{
		width: 100%;
	}
	.box ul{
		width: 100%;
	}
	.box ul li{
		text-indent: 1.25rem;
		height: 40px;
		line-height: 40px;
		width: 95%;
		margin: 0 auto;
		background: white;
		box-shadow: 0rem 0.2rem 0rem 0rem gainsboro;
		margin-top: 0.625rem;
		border-radius: 0.3125rem;
		position: relative;
	}
	.box ul li span:nth-child(2){
		position: absolute;
		right: 1.25rem;
		font-size: 1.25rem;
	}
	.box label{
		width: 100%;
		height: 50px;
		line-height: 50px;
		display: block;
		background-color: white;
		color: red;
		text-align: center;
		position: absolute;
		bottom: 0;
	}
</style>